<template>
  <div class="PageSelect">
    <div class="demo-pagination-block">
      <!-- 第一部分：总条数和每页条数选择 -->
      <el-pagination
        :current-page="internalCurrentPage"
        :page-size="internalPageSize"
        :pager-count="7"
        :page-sizes="[10, 20, 30, 40]"
        layout="slot, sizes"
        :total="total"
        :disabled="disabled"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
        <span class="el-pagination__total">共{{ total }}条</span>
      </el-pagination>
      <!-- 第二部分：首页按钮和页码导航 -->
      <el-pagination
        :current-page="internalCurrentPage"
        :page-size="internalPageSize"
        :pager-count="7"
        :page-sizes="[10, 20, 30, 40]"
        layout="slot, prev, pager, next"
        :total="total"
        :disabled="disabled"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
        <el-button
          :disabled="internalCurrentPage === 1 ? true : false"
          size="default"
          type="text"
          class="btn-prev"
          @click="toFirstPage"
        >
          首页
        </el-button>
      </el-pagination>
      <!-- 第三部分：尾页按钮和页面跳转 -->
      <el-pagination
        :current-page="internalCurrentPage"
        :page-size="internalPageSize"
        :pager-count="7"
        :page-sizes="[10, 20, 30, 40]"
        layout="slot"
        :total="total"
        :disabled="disabled"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
        <el-button
          :disabled="internalCurrentPage === maxPage ? true : false"
          size="default"
          type="text"
          class="btn-prev"
          @click="toLastPage"
        >
          尾页
        </el-button>
        <span class="el-pagination__jump">
          跳转
          <div class="el-input el-pagination__editor is-in-pagination">
            <input
              type="number"
              autocomplete="off"
              :min="1"
              :max="maxPage"
              class="el-input__inner"
              v-model.number="toPageNum"
              @change="toPage"
            >
          </div>
          页
        </span>
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PageSelect',
  props: {
    // 组件标识，用于区分不同实例
    instanceId: {
      type: String,
      default: 'default'
    },
    // 总条数
    total: {
      type: Number,
      default: 0
    },
    // 当前页码
    currentPage: {
      type: Number,
      default: 1
    },
    // 每页显示条数
    pageSize: {
      type: Number,
      default: 10
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      toPageNum: 1, // 跳转页码
      internalCurrentPage: this.currentPage, // 内部维护的当前页码
      internalPageSize: this.pageSize // 内部维护的每页条数
    }
  },
  computed: {
    // 计算最大页码
    maxPage() {
      return Math.ceil(this.total / this.internalPageSize) || 1
    }
  },
  watch: {
    // 监听props变化更新内部状态
    currentPage: {
      immediate: true,
      handler(newVal) {
        this.internalCurrentPage = newVal
        this.toPageNum = newVal
      }
    },
    pageSize: {
      immediate: true,
      handler(newVal) {
        this.internalPageSize = newVal
      }
    }
  },
  methods: {
    /**
     * 每页条数变化事件
     * @param {number} val 新的每页条数
     */
    handleSizeChange(val) {
      this.internalPageSize = val
      this.$emit('size-change', {
        instanceId: this.instanceId,
        pageSize: val,
        currentPage: this.internalCurrentPage
      })
      this.$emit('update:pageSize', val)
    },

    /**
     * 当前页码变化事件
     * @param {number} val 新的页码
     */
    handleCurrentChange(val) {
      this.internalCurrentPage = val
      this.toPageNum = val
      this.$emit('current-change', {
        instanceId: this.instanceId,
        currentPage: val,
        pageSize: this.internalPageSize
      })
      this.$emit('update:currentPage', val)
    },

    /**
     * 跳转到首页
     */
    toFirstPage() {
      this.handleCurrentChange(1)
    },

    /**
     * 跳转到尾页
     */
    toLastPage() {
      this.handleCurrentChange(this.maxPage)
      // console.log('this.maxPagethis.maxPagethis.maxPage')
    },

    /**
     * 跳转到指定页码
     */
    toPage() {
      // 验证输入页码的有效性
      let page = parseInt(this.toPageNum)
      if (isNaN(page) || page < 1) {
        page = 1
      } else if (page > this.maxPage) {
        page = this.maxPage
      }
      this.toPageNum = page
      this.handleCurrentChange(page)
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-pagination-block {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  align-items: center;
  flex-wrap: wrap;

  .btn-prev {
    color: #409EFF;
    margin-right: 10px;
  }

  /* 调整分页组件间距 */
  .el-pagination {
    margin: 0 5px;
  }

  /* 跳转输入框样式调整 */
  .el-pagination__editor {
    width: 60px;
    margin: 0 5px;
    .el-input__inner {
      text-align: center;
    }
  }
}
</style>
